<template>
	<view class="page">
		

			<!-- 参数输入区域 -->
			<view class="section">
				<view class="input-item">
					<text class="label">侧面限界(mm)</text>
					<view class="input-with-unit">
						<uni-easyinput v-model="sideLimit" placeholder="请输入" />
						<uni-icons type="right" size="16" color="#666666" />
					</view>
				</view>
				<view class="input-item">
					<text class="label">支柱斜率(mm/米)</text>
					<view class="input-with-unit">
						<uni-easyinput v-model="poleSlope" placeholder="外倾为正，内倾为负" />
						<uni-icons type="right" size="16" color="#666666" />
					</view>
				</view>
				<view class="input-item">
					<text class="label">外轨超高(mm)</text>
					<view class="input-with-unit">
						<uni-easyinput v-model="outerRailHeight" placeholder="向外为正，向内为负" />
						<uni-icons type="right" size="16" color="#666666" />
					</view>
				</view>
				<view class="input-item">
					<text class="label">拉出值(mm)</text>
					<view class="input-with-unit">
						<uni-easyinput v-model="pulloutValue" placeholder="请输入" />
						<uni-icons type="right" size="16" color="#666666" />
					</view>
				</view>
				<view class="input-item">
					<text class="label">承力索高(mm)</text>
					<view class="input-with-unit">
						<uni-easyinput v-model="cableHeight" placeholder="请输入" />
						<uni-icons type="right" size="16" color="#666666" />
					</view>
				</view>
				<view class="input-item">
					<text class="label">导线高(mm)</text>
					<view class="input-with-unit">
						<uni-easyinput v-model="wireHeight" placeholder="请输入" />
						<uni-icons type="right" size="16" color="#666666" />
					</view>
				</view>
				<view class="input-item">
					<text class="label">上底座高(mm)</text>
					<view class="input-with-unit">
						<uni-easyinput v-model="upperBaseHeight" placeholder="请输入" />
						<uni-icons type="right" size="16" color="#666666" />
					</view>
				</view>
				<view class="input-item">
					<text class="label">底座间距(mm)</text>
					<view class="input-with-unit">
						<uni-easyinput v-model="baseSpacing" placeholder="请输入" />
						<uni-icons type="right" size="16" color="#666666" />
					</view>
				</view>
			</view>

			<!-- 选择区域 -->
			<view class="section">
				<view class="input-item">
					<text class="label">底座类型</text>
					<view class="select-wrapper">
						<uni-data-select class="full-width-select" v-model="baseType" :localdata="baseTypeOptions"
							placeholder="请选择" @change="handleWbdzChange" />
						<uni-icons type="plusempty" @click="goWbdz(projectValue)" size="16" color="#666666"
							class="plus-icon cursor-pointer" />
					</view>
				</view>
				<view class="input-item">
					<text class="label">绝缘子类型</text>
					<view class="select-wrapper">
						<uni-data-select class="full-width-select" v-model="insulatorType"
							:localdata="insulatorTypeOptions" placeholder="请选择" />
						<uni-icons type="plusempty" @click="goWbjyz(projectValue)" size="16" color="#666666"
							class="plus-icon cursor-pointer" />
					</view>
				</view>
				<view class="input-item">
					<text class="label">定位器类型</text>
					<view class="select-wrapper">
						<uni-data-select class="full-width-select" v-model="positionerType"
							:localdata="positionerTypeOptions" placeholder="请选择" />
						<uni-icons type="plusempty" @click="goWbdwq(projectValue)" size="16" color="#666666"
							class="plus-icon cursor-pointer" />
					</view>
				</view>
				<view class="switch-item">
					<text class="label">定位方式</text>
					<uni-data-checkbox v-model="positionType" :localdata="positionOptions" mode="button"
						@change="handlePositionChange" />
				</view>
				<view class="switch-item">
					<text class="label">腕臂支撑</text>
					<uni-data-checkbox v-model="armSupport" :localdata="armSupportOptions" mode="button"
						@change="handleArmSupportChange" />
				</view>
				<view class="switch-item">
					<text class="label">支撑斜拉</text>
					<uni-data-checkbox v-model="supportType" :localdata="supportTypeOptions" mode="button"
						@change="handlesupportTypeChange" />
				</view>
				<view class="switch-item">
					<text class="label">防风拉线</text>
					<uni-data-checkbox v-model="windResistance" :localdata="windResistanceOptions" mode="button"
						@change="handlewindResistanceChange" />
				</view>
			</view>

			<!-- 底部说明与按钮 -->
			<view class="footer">
				<view class="tips">
					<text class="tip-item">1、该计算适用通化2009-1006中间柱、道岔柱、非弱段关节计算及部分设计防腕臂计算。</text>
					<text class="tip-item">2、如果不确定，请联系客服。</text>
				</view>
			</view>
		</view>

		<!-- 底部导航栏 -->
		<view class="tab-bar">
			<view class="tab-item cursor-pointer" @click="goWbrm(1)">
				<text class="tab-text">参数</text>
			</view>
			<view class="tab-item cursor-pointer" @click="goWbrm(2)">
				<text class="tab-text">设计</text>
			</view>
			<view class="tab-item cursor-pointer" @click="goWbrm(3)">
				<text class="tab-text">修正</text>
			</view>
			<view class="calculate-btn cursor-pointer" @click="handleCalculate">
				<text class="btn-text">计算</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import project from '../../api/common/project';
	import zhanqu from '../../api/common/zhanqu';
	import wbdz from '../../api/wanbi/wbdz';
	import wbjyz from '../../api/wanbi/wbjyz';
	import wbdwq from '../../api/wanbi/wbdwq';
	import selectUtils from '../../utils/selectUtils';
	import wbrm from '../../api/wanbi/wbrm';

	// 工程项目选项
	const projectOptions = ref([{
		value: 1,
		text: '项目A'
	}, ]);
	// 转换函数
	const transformData = (rawData: any) => {
		return rawData.map((item: any) => ({
			value: item.prjid,
			text: item.pname
		}))
	};

	// 车站选项
	const stationOptions = ref([
		// { value: 1, text: '站点A' }
	]);

	// 底座类型选项
	const baseTypeOptions = ref([
		// { value: 1, text: '底座A' },
	]);

	// 绝缘子类型选项
	const insulatorTypeOptions = ref([
		// { value: 1, text: '绝缘子A' },
	]);

	// 定位器类型选项
	const positionerTypeOptions = ref([
		// { value: 1, text: '定位器A' },
	]);

	// 定位方式选项
	const positionOptions = ref([{
			value: 1,
			text: '正定位'
		},
		{
			value: 2,
			text: '反定位'
		},
	]);

	// 腕臂支撑选项
	const armSupportOptions = ref([{
			value: 1,
			text: '有'
		},
		{
			value: 2,
			text: '无'
		},
	]);

	// 支撑斜拉选项
	const supportTypeOptions = ref([{
			value: 1,
			text: '支撑'
		},
		{
			value: 2,
			text: '斜拉'
		},
		{
			value: 3,
			text: 'V拉'
		},
	]);

	// 防风拉线选项
	const windResistanceOptions = ref([{
			value: 1,
			text: '有'
		},
		{
			value: 2,
			text: '无'
		},
	]);

	// 表单数据
	const projectValue = ref(0);
	const stationValue = ref('');
	const poleNumber = ref('001#');
	const sideLimit = ref('3110');
	const poleSlope = ref('10');
	const outerRailHeight = ref('30');
	const pulloutValue = ref('300');
	const cableHeight = ref('7850');
	const wireHeight = ref('6400');
	const upperBaseHeight = ref('7780');
	const baseSpacing = ref('1800');
	const baseType = ref(''); //底座类型
	const insulatorType = ref(''); //绝缘子类型
	const positionerType = ref(''); //定位器类型
	const positionType = ref(1); //定位方式
	const armSupport = ref(1); //腕臂支撑
	const supportType = ref(1); //斜拉
	const windResistance = ref(1); //防风拉线

	//生命周期函数
	onMounted(() => {
		project.proList({}).then((res: any) => {
			console.log(res)
			// 响应式数据
			projectOptions.value = transformData(res.data)
		})
	})

	// 处理项目变化,项目变化时候，腕臂底座，定位器跟着变化，并加载
	const handleProjectChange = (value: number) => {
		console.log('项目选择:', value);
		//查询该工程站区
		zhanqu.listByProId(value).then((res: any) => {
			console.log(res)
			var zhanquOptions = res.data;
			stationOptions.value = zhanquOptions.map((item: any) => {
				return {
					value: item.zqid,
					text: item.zqName,
				}
			})
		})

		//查询该工程腕臂底座
		wbdz.listByProId(value).then((res: any) => {
			console.log(res)
			var wbdzOptions = res.data;
			baseTypeOptions.value = wbdzOptions.map((item: any) => {
				return {
					value: item.wbdzid,
					text: item.dzname,
				}
			})
		})

		//查询该工程腕臂绝缘子
		selectUtils.fetchModuleOptions(value, wbjyz.listByProId, {
			valueKey: 'wbjyzid',
			textKey: 'jyzname'
		}).then((baseTypeOptions: any[]) => {
			// 直接使用 baseTypeOptions 即可
			console.log('腕臂绝缘子选项:', baseTypeOptions);
			insulatorTypeOptions.value = baseTypeOptions
		});
		//腕臂定位器

		selectUtils.fetchModuleOptions(value, wbdwq.listByProId, {
			valueKey: 'did',
			textKey: 'dname'
		}).then((baseTypeOptions: any[]) => {
			// 直接使用 baseTypeOptions 即可
			console.log('腕臂定位器选项:', baseTypeOptions);
			positionerTypeOptions.value = baseTypeOptions
		});
	};

	// 处理站点变化
	const handleStationChange = (value: string) => {
		console.log('站点选择:', value);
	};


	// 处理腕臂底座变化
	const handleWbdzChange = (value: string) => {
		console.log('底座选择:', value);
	};
	// handleWbdzChange

	// 处理定位方式变化
	const handlePositionChange = (value: number) => {
		console.log('定位方式:', value);
	};

	// 处理腕臂支撑变化
	const handleArmSupportChange = (value: number) => {
		console.log('腕臂支撑:', value);
	};

	// 处理斜拉线变化
	const handlesupportTypeChange = (value: number) => {
		console.log('支撑斜拉线:', value);
	};

	// 处理防风拉线变化
	const handlewindResistanceChange = (value: number) => {
		console.log('处理防风拉线变化:', value);
	};


	// 跳转到腕臂参数界面
	const goWbrm = (type: number) => {
		uni.navigateTo({
			url: `/pages/wanbi/wbrm?type=${type}`
		})
	}
	//跳转到腕臂底座
	const goWbdz = (type: number) => {
		if (!projectValue.value) {
			uni.showToast({
				title: '请选择工程项目',
				icon: 'none'
			});
			return;
		}
		uni.navigateTo({
			url: `/pages/wanbi/wbdz/wbdz?type=${type}`
		})
	}
	//跳转到腕臂绝缘子
	const goWbjyz = (type: number) => {
		if (!projectValue.value) {
			uni.showToast({
				title: '请选择工程项目',
				icon: 'none'
			});
			return;
		}
		uni.navigateTo({
			url: `/pages/wanbi/wbjyz/wbjyz?type=${type}`
		})
	}
	//跳转到腕臂定位器
	const goWbdwq = (type: number) => {
		if (!projectValue.value) {
			uni.showToast({
				title: '请选择工程项目',
				icon: 'none'
			});
			return;
		}
		uni.navigateTo({
			url: `/pages/wanbi/wbdwq/wbdwq?type=${type}`
		})
	}

	// 处理计算按钮点击
	const handleCalculate = () => {
		if (!projectValue.value) {
			uni.showToast({
				title: '请选择工程项目',
				icon: 'none'
			});
			return;
		}
		if (!stationValue.value) {
			uni.showToast({
				title: '请选择车站/区间',
				icon: 'none'
			});
			return;
		}
		if (!sideLimit.value) {
			uni.showToast({
				title: '请输入侧面限界',
				icon: 'none'
			});
			return;
		}
		if (!pulloutValue.value) {
			uni.showToast({
				title: '请输入拉出值',
				icon: 'none'
			});
			return;
		}

		// 收集表单数据
		const formData = {
			projectValue: projectValue.value,
			stationValue: stationValue.value,
			poleNumber: poleNumber.value,
			sideLimit: sideLimit.value,
			poleSlope: poleSlope.value,
			outerRailHeight: outerRailHeight.value,
			pulloutValue: pulloutValue.value,
			cableHeight: cableHeight.value,
			wireHeight: wireHeight.value,
			upperBaseHeight: upperBaseHeight.value,
			baseSpacing: baseSpacing.value,
			baseType: baseType.value,
			insulatorType: insulatorType.value,
			positionerType: positionerType.value,
			positionType: positionType.value,
			armSupport: armSupport.value,
			supportType: supportType.value,
			windResistance: windResistance.value
		};

		const wbrm1 = ref([]);
		const wbrm2 = ref([]);
		const wbrm3 = ref([]);

		const promises = [
			wbrm.listByPId(1).then((res: any) => {
				wbrm1.value = res.data.map((item: any) => {
					return {
						pname: item.pname,
						pvalue: item.pvalue,
					}
				});
				return wbrm1.value;
			}),
			wbrm.listByPId(2).then((res: any) => {
				wbrm2.value = res.data.map((item: any) => {
					return {
						pname: item.pname,
						pvalue: item.pvalue,
					}
				});
				return wbrm2.value;
			}),
			wbrm.listByPId(3).then((res: any) => {
				wbrm3.value = res.data.map((item: any) => {
					return {
						pname: item.pname,
						pvalue: item.pvalue,
					}
				});
				return wbrm3.value;
			})
		];

		Promise.all(promises).then(() => {
			// 将 formData、wbrm1、wbrm2、wbrm3 封装在一起
			const combinedData = {
				formData,
				wbrm1: wbrm1.value,
				wbrm2: wbrm2.value,
				wbrm3: wbrm3.value
			};

			// 将数据转换为 JSON 字符串
			const jsonData = JSON.stringify(combinedData);
			console.log('封装后的 JSON 数据:', jsonData);

			// 执行计算逻辑
			console.log('开始计算');
		})
	};
	// 跳转到新建工程界面
	const goProject = () => {
		uni.navigateTo({
			url: '/pages/project/projectList'
		})
	}
	onShow(() => {
		wbdz.listByProId(projectValue.value).then((res: any) => {
			var wbdzOptions = res.data;
			baseTypeOptions.value = wbdzOptions.map((item: any) => {
				return {
					value: item.wbdzid,
					text: item.dzname,
				}
			})
		});
		selectUtils.fetchModuleOptions(projectValue.value, wbjyz.listByProId, {
			valueKey: 'wbjyzid',
			textKey: 'jyzname'
		}).then((baseTypeOptions: any[]) => {
			insulatorTypeOptions.value = baseTypeOptions
		});
		selectUtils.fetchModuleOptions(projectValue.value, wbdwq.listByProId, {
			valueKey: 'did',
			textKey: 'dname'
		}).then((baseTypeOptions: any[]) => {
			positionerTypeOptions.value = baseTypeOptions
		});
	});
</script>

<style>
	page {
		height: 100%;
	}

	.page {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.container {
		flex: 1;
		overflow: auto;
		padding: 0 30rpx;
	}

	.section {
		background: #ffffff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin: 20rpx 0;
	}

	.input-item {
		padding: 20rpx 0;
		border-bottom: 1px solid #eee;
	}

	.input-item:last-child {
		border-bottom: none;
	}

	.label {
		font-size: 14px;
		color: #333333;
		margin-bottom: 16rpx;
		display: block;
	}

	.input-with-unit {
		display: flex;
		align-items: center;
	}

	.select-wrapper {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.select-wrapper :deep(.uni-data-select) {
		flex: 1;
	}

	.full-width-select {
		width: 100%;
	}

	.plus-icon {
		margin-left: 10rpx;
		width: 16px;
		height: 16px;
		flex-shrink: 0;
	}

	.switch-item {
		padding: 20rpx 0;
		border-bottom: 1px solid #eee;
	}

	.switch-item:last-child {
		border-bottom: none;
	}

	.footer {
		padding: 30rpx 0;
	}

	.tips {
		padding: 20rpx;
	}

	.tip-item {
		font-size: 12px;
		color: #999999;
		line-height: 1.5;
		display: block;
		margin-bottom: 10rpx;
	}

	.tab-bar {
		height: 100rpx;
		background: #ffffff;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		flex-shrink: 0;
	}

	.tab-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tab-text {
		font-size: 14px;
		color: #666666;
	}

	.calculate-btn {
		width: 200rpx;
		height: 80rpx;
		background: #2979ff;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 20rpx;
	}

	.btn-text {
		color: #ffffff;
		font-size: 16px;
	}

	.cursor-pointer {
		cursor: pointer;
	}
</style>
